<template>
  <div class="pubilsh-content" :style="{ height: `${viewheight.GetViewHeight(105)}px` }">
    <el-scrollbar>
      <div class="pubilsh-box">
        <FormComponent :field-colums="FormCon1" :isrule="rules" ref="FormRef" @submit="getMajor">
          <template v-slot:basiceditor>
            <BasicEditor ref="editorRef" />
          </template>
          <template v-slot:uploadfile>
            <UploadFileComponent ref="uploadRef" :file-introd="''" :postId="postId" :ismul="true" :islim="8"
              @uploademit="uploademit" />
          </template>
          <template v-slot:sharetype>
            <el-radio-group v-model="radiovalue">
              <el-radio label="学习笔记" size="large">学习笔记</el-radio>
              <el-radio label="电子文档" size="large">电子文档</el-radio>
              <el-radio label="习题" size="large">习题</el-radio>
              <el-radio label="其他资源" size="large">其他资源</el-radio>
            </el-radio-group>
          </template>
          <template v-slot:options>
            <div class="option">
              <el-button type="primary" @click="pubilsh">
                <el-icon :size="16">
                  <i-ic-round-publish />
                </el-icon>
                Pubilsh
              </el-button>
              <el-button type="warning" @click="reset">
                <el-icon :size="16">
                  <i-fluent-delete-24-filled />
                </el-icon>
                Reset
              </el-button>
            </div>
          </template>
        </FormComponent>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import BasicEditor from "@components/BasicEditor.vue";
import FormComponent from "@components/FormComponent/FormComponent.vue";
import UploadFileComponent from "@components/UploadFileComponent/UploadFileComponent.vue";
import { FormCon1, rules } from "../config/form-config";
import { useViewHeightStore } from "@/store/viewheight";
import { useCollege } from "@store/collegeinfo";
import { post_add } from "@api/postapi";
import { onMounted, ref, watch } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import { storeToRefs } from "pinia";
import { get_major } from "@/api/college";
import { useUserInfo } from "@store/userinfo";
import router from "@router/index";

const viewheight = useViewHeightStore();
const { userinfo } = storeToRefs(useUserInfo());
const college = ref<string>("");
const editorRef = ref<InstanceType<typeof BasicEditor>>();
const FormRef = ref<InstanceType<typeof FormComponent>>();
const uploadRef = ref<InstanceType<typeof UploadFileComponent>>();
const postId = ref<string>();
const { FormCon } = storeToRefs(useCollege());

const radiovalue = ref<string>();

const pubilsh = async () => {
  if (!userinfo.value.college || !userinfo.value.major || !userinfo.value.grade) {
    ElMessageBox.confirm(
      '您的用户信息还未补全！是否前往个人中心补全？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        router.push("/main/personcenter");
      })
  } else {
    FormRef.value.onSubmit();
    const res = await post_add({
      ...FormRef.value.formData,
      content: editorRef.value.content,
      type: radiovalue.value,
    });
    if (res.code === 200) {
      postId.value = res.data.id;
      userinfo.value.code += 5;
    }
  }
};

const getMajor = async (formData) => {
  if (college.value !== formData.value.college) {
    if (!formData.value.college) {
      FormCon1[6].options = [];
    } else {
      const res = await get_major({ college: formData.value.college });
      if (res.code === 200) {
        FormCon1[6].options = [];
        FormCon.value[1].options = [];
        res.data.forEach((item) => {
          FormCon1[6].options.push({
            value: item,
            label: item,
          });
        });
      }
    }
  }
  college.value = formData.value.college;
};

const reset = async () => {
  FormRef.value.onReset();
  editorRef.value.content = "";
  radiovalue.value = "";
  uploadRef.value.fileList.splice(0, uploadRef.value.fileList.length);
  const res = await axios({
    method: "delete",
    url: "/api/multipart/deleteFile",
    data: uploadRef.value.newfilelist,
  });
  if (res.data.code === 200) {
    uploadRef.value.newfilelist.splice(0, uploadRef.value.newfilelist.length);
  }
};

const uploademit = (uploadinfo: any) => {
  if (uploadinfo) {
    ElMessage.success("帖子发布成功！");
    FormRef.value.onReset();
    editorRef.value.content = "";
    radiovalue.value = "";
    uploadRef.value.fileList.splice(0, uploadRef.value.fileList.length);
    uploadRef.value.newfilelist.splice(0, uploadRef.value.newfilelist.length);
  }
};

onMounted(() => {
  FormCon1[5].options = FormCon.value[0].options;
});
</script>

<style scoped lang="less">
.pubilsh-content {
  width: 900px;

  .pubilsh-box {
    width: 800px;
    display: flex;
    justify-content: center;
    padding: 10px 30px;

    .option {
      width: 100%;
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
    }
  }
}
</style>
